<template>
  <div id="nav">
    <AppLink to="/">Home</AppLink>
    <AppLink 
      v-for="destination in destinations" 
      :key="destination.id" 
      :to="{ name: 'destination.show', params: { id: destination.id, slug: destination.slug } }"
    >
      {{ destination.name }}
    </AppLink>
    <AppLink :to="{ name: 'Protected' }">Dashboard</AppLink>
    <AppLink to="https://vite.dev/">Vite</AppLink>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import data from '@/db/data.json'
import AppLink from "@/components/AppLink.vue";

// 设置响应式数据
const destinations = ref(data.destinations)
</script>

<style scoped>

</style>